<!--  -->
<template>
    <HomeBox title="资讯" titleClass="bg-white text-black">
        <z-paging
            ref="paging"
            v-model="list"
            @query="queryList"
            :fixed="false"
            :paging-style="{
                height: '100%',
            }"
        >
            <view
                v-for="(item, index) in list"
                :key="index"
                class="flex p-3 border-b-2 mx-4 bg-white"
            >
                <view class="pr-2" style="width: calc(100% - 5rem)">
                    <view
                        class="message-overflow w-full"
                        style="height: calc(100% - 2.25rem)"
                        >asdhbwfilohwiefbh地球为第八岁的法国i哈维i北方汉人啊不过葳蕤湖北的司法部哈斯防护asdhbwfilohwiefbh地球为第八岁的法国i哈维i北方汉人啊不过葳蕤湖北的司法部哈斯防护asdhbwfilohwiefbh地球为第八岁的法国i哈维i北方汉人啊不过葳蕤湖北的司法部哈斯防护</view
                    >
                    <view class="grid grid-cols-2 text-xs mt-4">
                        <view class="flex items-center">
                            <image
                                class="rounded-full w-5 h-5 mr-1"
                                mode="aspectFill"
                                src="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg"
                            ></image>
                            吴江住建
                        </view>
                        <view class="leading-5 text-gray-500">08月20日</view>
                    </view>
                </view>
                <image
                    class="rounded-md w-20 h-20"
                    mode="aspectFill"
                    src="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg"
                ></image>
            </view>
        </z-paging>
    </HomeBox>
</template>

<script setup lang="ts">
import HomeBox from "@/components/HomeBox/index.vue";
import { ref } from "vue";
type listType = {
    title: string;
    desc: string;
    cost: string;
    average: string;
};
const list = ref<listType[]>([]);
const paging = ref();

const loadPage = (page: number) => {
    return new Promise((resolve) => {
        resolve([
            {
                title: "奥林清华1幢103" + page,
                desc: "4室2厅  |  170㎡",
                cost: "340万",
                average: "20000元/平",
            },
            {
                title: "奥林清华1幢103" + page + 1,
                desc: "4室2厅  |  170㎡",
                cost: "340万",
                average: "20000元/平",
            },
            {
                title: "奥林清华1幢103" + page,
                desc: "4室2厅  |  170㎡",
                cost: "340万",
                average: "20000元/平",
            },
            {
                title: "奥林清华1幢103" + page + 1,
                desc: "4室2厅  |  170㎡",
                cost: "340万",
                average: "20000元/平",
            },
            {
                title: "奥林清华1幢103" + page,
                desc: "4室2厅  |  170㎡",
                cost: "340万",
                average: "20000元/平",
            },
            {
                title: "奥林清华1幢103" + page + 1,
                desc: "4室2厅  |  170㎡",
                cost: "340万",
                average: "20000元/平",
            },
            {
                title: "奥林清华1幢103" + page,
                desc: "4室2厅  |  170㎡",
                cost: "340万",
                average: "20000元/平",
            },
            {
                title: "奥林清华1幢103" + page + 1,
                desc: "4室2厅  |  170㎡",
                cost: "340万",
                average: "20000元/平",
            },
            {
                title: "奥林清华1幢103" + page,
                desc: "4室2厅  |  170㎡",
                cost: "340万",
                average: "20000元/平",
            },
            {
                title: "奥林清华1幢103" + page + 1,
                desc: "4室2厅  |  170㎡",
                cost: "340万",
                average: "20000元/平",
            },
        ]);
    });
};
const queryList = (pageNo: number, pageSize: number) => {
    console.log("加载");
    loadPage(pageNo)
        .then((res) => {
            paging.value.complete(res);
        })
        .catch((_) => {
            paging.value.complete(false);
        });
};
</script>
<style scoped lang="scss">
.message-overflow {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
</style>
